<template>
	<view class="invoice">
		<view class="invoice-title">
			<view class="" style="background-color: rgb(68,121,172);">
				<u-tabs :list="list1" :lineHeight="2" lineColor="#FFFFFF" lineWidth="120rpx"
					:activeStyle="{color:'#FFFFFF'}" :inactiveStyle="{color:'#F2F2F2'}" :scrollable="false">
				</u-tabs>
			</view>
			<view class="invoice-info">
				<view class="row1">
					<view class="">服务时间</view>
					<view class="row1-tips" @click.stop="handleRouter('/homePages/serviceTime/index')">查看</view>
				</view>
				<view class="row2">
					<view class="row2-view">就餐人数</view>
					<view class="row2-view">
						<u-line-progress :percentage="progress" height="50rpx" :showText="false" activeColor="rgb(68,121,172)"
							inactiveColor="rgb(230,234,247)">
						</u-line-progress>
					</view>
					<view class="row-tips row2-view">
						<view class="row-tips-item">
							<view class="row-tips-round" style="background-color: rgb(68,121,172);"></view>
							<view class="">占用：10</view>
						</view>
						<view class="row-tips-item">
							<view class="row-tips-round" style="background-color: rgb(230,234,247);"></view>
							<view class="">空闲：784</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="invoice-body">
			<view class="cell">
				<scroll-view scroll-y="true" class="cell-item1">
					<view>
						<view :class="{list:true,'list-active':tabsFloorVal == item.value}"
						 @click.stop="tabsFloorVal = item.value"
						 v-for="item in tabsFloor" :key="item.value">
							<view class="list-tips" v-if="item.status == 1">营</view>
							<view class="list-label">{{item.label}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="cell-item2">
					<view class="nav">
						<view :class="{'nav-item':true,'nav-item-active':navValue == item.value}" 
						@click.stop="navValue=item.value"
						v-for="item in navList" :key="item.value">
							{{item.label}}
						</view>
					</view>
					<view class="content">
						<view class="content-tabs">
							<view :class="{active:timeValue==item.value}" @click.stop="timeValue=item.value" v-for="item in timeList" :key="item.value">
								{{item.label}}
							</view>
						</view>
						
						<scroll-view scroll-y="true" class="list">
							<view>
								<view class="list-item" v-for="item in 10" :key="item">
									<u--image radius="6rpx" :showLoading="true"
										src="https://p.qqan.com/up/2022-6/16543432417971617.jpg" width="220rpx"
										height="120rpx"></u--image>
									<view class="list-content">
										<view class="">红烧排骨</view>
										<view class="list-tips">
											<u-icon name="thumb-up-fill" size="40rpx" color="#666666"></u-icon>
											<text style="margin-right: 20rpx;">赞 0</text>
											<u-icon name="thumb-down" size="40rpx" color="#666666"></u-icon>
											<text>差 0</text>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'Invoice',
		data() {
			return {
				progress: 50,
				timeValue: 1,
				timeList:[
					{value: 1, label: '早餐'},
					{value: 2, label: '午餐'},
					{value: 3, label: '晚餐'},
				],
				navValue: 1,
				navList:[
					{value: 1, label: '一'},
					{value: 2, label: '二'},
					{value: 3, label: '三'},
					{value: 4, label: '四'},
					{value: 5, label: '五'},
					{value: 6, label: '六'},
					{value: 7, label: '日'}
				],
				tabsFloorVal: 1,
				tabsFloor:[
					{value: 1, label: '1F',status:0},
					{value: 2, label: '9F',status:0},
					{value: 3, label: '20F',status:0},
					{value: 5, label: '25F',status:1},
					{value: 6, label: '38F',status:0},
					{value: 7, label: 'B2',status:0},
					{value: 8, label: 'B3',status:0},
					{value: 9, label: '饮品服务区',status:0},
				],
				list1: [{
					name: '光华路办公区',
				}, {
					name: '复兴路办公区',
				}, {
					name: '鲁谷办公区'
				}]
			}
		},
		methods: {
			handleRouter(url) {
				uni.navigateTo({
					url
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.invoice {
		.invoice-body{
			position: fixed;
			left: 0;
			right: 0;
			top: 300rpx;
			bottom: 0;
			box-sizing: border-box;
			padding-top: 50rpx;
			background-color: #FFFFFF;
			.cell{
				background-color: rgb(243, 243, 251);
				height: 100%;
				display: flex;
				justify-content: space-between;
				.cell-item1{
					width: 160rpx;
					height: 100%;
					.list{
						position: relative;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 80rpx;
						.list-tips{
							position: absolute;
							left: 10rpx;
							top: auto;
							font-size: 20rpx;
							padding:4rpx 10rpx;
							color: #FFFFFF;
							background-color: #f74062;
							border-radius: 4rpx;
							transform: scale(0.8);
						}
						.list-label{
							font-size: 28rpx;
							color: black;
						}
					}
					.list-active{
						background-color: rgb(68,121,172);
						.list-label{
							color: #FFFFFF;
						}
					}
				}
				.cell-item2{
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					.content{
						flex: 1;
						padding-right: 10rpx;
						.list{
							height: calc(100% - 70rpx);
						}
						.list-item{
							display: flex;
							align-items: center;
							padding-top: 20rpx;
							&:nth-last-child(1){
								padding-bottom: 100rpx;
							}
							.list-content{
								margin-left: 20rpx;
								.list-tips{
									display: flex;
									align-items: center;
									margin-top: 10rpx;
									color: #666666;
								}
							}
						}
						.content-tabs{
							background-color: rgb(243, 243, 251);
							display: flex;
							view{
								flex: 1;
								text-align: center;
								height: 70rpx;
								line-height: 70rpx;
							}
							.active{
								color: rgba(0, 122, 154,0.8);
							}
						}
					}
					.nav{
						width: 100rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 28rpx;
						.nav-item{
							height: 70rpx;
							width: 70rpx;
							text-align: center;
							line-height: 70rpx;
							border-radius: 50%;
						}
						.nav-item-active{
							background-color: rgb(0, 122, 154);
							color: #FFFFFF;
						}
					}
				}
				.cell-item1,.cell-item2{
					background-color: #FFFFFF;
				}
			}
		}
		.invoice-title {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
		}

		&::after {
			content: "";
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: -1;
			background-color: rgb(243, 243, 251);
		}

		.invoice-info {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 20rpx 0;
			background-color: #FFFFFF;

			.row1 {
				.row1-tips {
					text-align: center;
					margin-top: 30rpx;
					color: rgb(0, 122, 154);
					font-size: 24rpx;
				}
			}

			.row2 {
				.row2-view {
					width: 300rpx;

					&:nth-child(2) {
						margin: 20rpx 0;
					}
				}

				.row-tips {
					font-size: 22rpx;
					color: #666666;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.row-tips-item {
						display: flex;
						align-items: center;
					}

					.row-tips-round {
						min-height: 20rpx;
						max-height: 20rpx;
						max-width: 20rpx;
						min-width: 20rpx;
						border-radius: 50%;
						margin-right: 4rpx;
					}
				}
			}
		}
	}
</style>
